<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <title>bootstrap</title>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link rel="stylesheet" href="./bootstrap/css/bootstrap.css" crossorigin="anonymous">

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link rel="stylesheet" href="./bootstrap/css/bootstrap-theme.css" crossorigin="anonymous">

        <script src="./js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script src="./bootstrap/js/bootstrap.js" crossorigin="anonymous"></script>
        <style>
            body {
                padding-top: :50px;
            }

            .starter {
                padding: 40px 15px;
                text-align: center;
            }
            
            .poem-title .panel-title {
                font-size: 24px;
            }
            
            #left_author a {
                margin-right: 10px;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <!-- 导航 -->
        <nav class="navbar navbar-inverse navbar-fix-top" role="navigation">
            <div class="container">
                <!-- logo -->
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">博雅诗词</a>
                </div>
                <!-- 栏目 -->
                <div id="navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="#">首页</a></li>
                        <li><a href="#">排行</a></li>
                        <li><a href="#">作者</a></li>
                    </ul>
                    
                    <!-- 搜索框 -->
                    <ul class="nav navbar-nav navbar-right">
                        <li style="width: 200px;padding-top: 7px;">
                            <div class="input-group">
                                <input type="text" class="form-control" placeholder="搜索关键字...">
                                <span class="input-group-btn">
                                    <button class="btn btn-default" type="button">
                                        <span class="glyphicon glyphicon-search"></span></button>
                                </span>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="container">
            <div class="blog-header">
                <h1 class="blog-title">博雅古诗词</h1>
                <p class="lead blog-description">带你穿越时空，与诗仙一起吟诗作赋。</p>
            </div>
            <div class="row">
                <div class="col-sm-8">
                    <section class="body">
                    <div class="panel panel-default">
                        <div class="panel-heading poem-title">
                            <h3 class="panel-title">
                                <a href="#">静夜思</a></h3>
                        </div>
                        <div class="panel-body">
                            <h6>唐.<a href="#">李白</a></h6><br>
                            窗前明月光，疑是地上霜。<br>
                            举头望明月，低头思故乡。
                            <h5 class="page-header"></h5>

                            <button type="button" class="btn btn-default btn-xs">译文</button>
                            <button type="button" class="btn btn-default btn-xs">注释</button>
                            <button type="button" class="btn btn-default btn-xs">赏析</button>
                            <button type="button" class="btn btn-default btn-xs">故事</button>
                        </div>
                        <p style="margin: 10px;display: none;">
                            你我夫妻诀别已经整整十年，强忍不去思念可终究难忘怀。孤坟远在千里之外，没有地方能诉说心中的悲伤凄凉。即使你我夫妻相逢怕是也认不出我来了，我四处奔波早已是灰尘满面两鬓如霜。
                            昨夜在梦中又回到了家乡，看见你正在小窗前对镜梳妆。你我二人默默相对无言，只有泪落千行。料想你年年都为我柔肠寸断，在那凄冷的月明之夜，在那荒寂的短松冈上。
                        </p>
                    </div>
                    </section>

                    <!-- 分页 -->
                    <nav>
                        <ul class="pagination pagination-lg">
                            <li class="disabled"><a href="#">&laquo;</a></li>
                            <li><a href="#">1</a></li>
                            <li class="active"><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">&raquo;</a></li>
                        </ul>
                    </nav>
                </div>

                <!-- 左侧栏目 -->
                <div class="col-sm-4">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a href="#">作者</a></h5>
                        </div>
                        <div id="left_author" class="panel-body">
                            <a href="#" class="btn btn-default btn-xs" role="button">李白</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">杜甫</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">苏轼</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">孟浩然</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">曹操</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">杜牧</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">李清照</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">袁枚</a>
                        </div>
                    </div>

                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h5 class="panel-title">
                                <a href="#">标签</a></h5>
                        </div>
                        <div id="left_author" class="panel-body">
                            <a href="#" class="btn btn-default btn-xs" role="button">四季</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">春天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">夏天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">秋天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">冬天</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">中秋</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">山水</a>
                            <a href="#" class="btn btn-default btn-xs" role="button">田园</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>
